<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true">
      <template #title><text>我的地址</text></template>
    </GlobalTopBar>
    <view class="page_content">
      <!-- 底部按钮 -->
      <view class="btnb">
        <button @click="store.to('/pages/my/address')">
          <uni-icons
            style="margin-right: 10rpx"
            type="plusempty"
            color="#fff"
            size="20"
          ></uni-icons
          >新增地址
        </button>
      </view>
      <!-- 地址 -->
      <view class="ul">
        <view
          class="li"
          v-for="(item, index) in userAddressList"
          :key="item.id"
          @click="selectAddress(item)"
        >
          <view class="li_top">
            <!-- 图标 -->
            <uni-icons
              type="location-filled"
              size="30"
              color="#3687F6"
            ></uni-icons>
            <view class="ctext">
              <!-- 姓名电话 -->
              <view class="v1">
                <text>{{ item.contact_name }}</text>
                <text style="margin-left: 10rpx">{{ item.phone }}</text>
              </view>
              <!-- 地址 -->
              <view class="v2"
                >{{ item.province_name }}-{{ item.city_name }}-{{
                  item.district_name
                }}
                {{ `${item.address}` }}</view
              >
            </view>
            <!-- 编辑 -->
            <view class="bj" @click.stop="bjPageFun(item)">
              <uni-icons type="compose" size="25" color="#3687F6"></uni-icons>
            </view>
          </view>
          <view class="li_bott flex">
            <text style="margin-right: 0rpx">设为默认地址</text>
            <switch
              v-if="item.is_default === 1"
              @click.stop
              style="transform: scale(0.7)"
              :checked="true"
              color="#0084F2"
              @change="(e) => switch1Change(e.detail.value, item, index)"
            />
            <switch
              v-else
              @click.stop
              style="transform: scale(0.7)"
              :checked="false"
              color="#0084F2"
              @change="(e) => switch1Change(e.detail.value, item, index)"
            />
            <image
              @click.stop="deladdressFun(item.id)"
              class="del_img"
              :src="`${store.imgDomain}del.png`"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
      <!-- 无地址 -->
      <view class="flex_center wdzbox" v-if="!userAddressList.length">
        <image
          class="address_1_img"
          :src="`${store.imgDomain}address_1.png`"
          mode="widthFix"
        />
        <text class="wdz_text">您还没有服务地址哦~</text>
      </view>
      <!-- 文字 -->
      <view class="btext">
        <image :src="`${store.imgDomain}my_text.png`" mode="scaleToFill" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { validatePhone } from '@/utils/validate';

const store = useCounterStore();
const userInfo = ref({});
const userAddressList = ref([]);

// 获取会员服务地址列表数据
const getUserAddressList = async () => {
  const data = await request('wxapp/user/getUserAddressList', {});
  userAddressList.value = data.list;
  console.log(userAddressList.value, 999);
};

// 切换默认地址
const switch1Change = async (val, item, index) => {
  let is_default = val ? 1 : 2;
  const datas = {
    id: item.id,
    is_default,
  };
  request('wxapp/user/doSaveUserAddressDefault', datas).finally(() => {
    getUserAddressList();
  });
};

// 编辑
const bjPageFun = (item) => {
  uni.navigateTo({
    url: '/pages/my/address',
    success: () => {
      // 页面跳转成功后，通过事件总线发送数据
      uni.$emit('datas', item);
    },
  });
};
// 单一删除服务地址数据
const delUserAddress = async (id) => {
  request('wxapp/user/delUserAddress', { id }).finally(() => {
    getUserAddressList();
  });
};

const deladdressFun = (id) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该地址吗？',
    confirmText: '确定', // 确认按钮文字
    cancelText: '取消', // 取消按钮文字
    success: (res) => {
      if (res.confirm) {
        delUserAddress(id);
      }
    },
    fail: (err) => {
      console.error('显示模态框失败', err);
    },
  });
};

const selectAddress = (row) => {
  if (!options.value.type) return;
  store.addressInfo = { ...row };
  uni.navigateBack({
    delta: 1,
  });
};

onShow(() => {
  getUserAddressList();
});
const options = ref({});
onLoad((option) => {
  console.log(999, option);

  options.value = option;
});
</script>

<style lang="scss" scoped>
.topbars {
  background-color: #ffffff;
}

.page_content {
  position: relative;
  .btnb {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 15rpx 30rpx;
    box-sizing: border-box;
    button {
      background-color: #0084f2;
      line-height: 70rpx;
      color: #fff;
      font-size: 30rpx;
      text-align: center;
      border-radius: 35rpx;
    }
  }
}
.btext {
  position: relative;
  margin-top: 35rpx;
  display: flex;
  justify-content: center;
  &::after {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    left: 140rpx;
    transform: translateY(-50%);
    background-color: #73adff;
  }
  &::before {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    right: 140rpx;
    transform: translateY(-50%);
    background-color: #73adff;
  }
  image {
    position: relative;
    display: block;
    opacity: 0.6;
    width: 185rpx;
    height: 38rpx;
  }
}
.ul {
  padding: 20rpx;
  box-sizing: border-box;
  .li {
    margin-bottom: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 1px solid #437ef6;
    box-sizing: border-box;
    padding: 20rpx;

    .li_top {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #a1cbff;
      padding: 20rpx 0;
    }
    .ctext {
      flex: 1;
      margin: 0 20rpx;
      text-align: left;
      .v1 {
        font-weight: 700;
        margin-bottom: 10rpx;
      }
      .v2 {
        color: $uni-text-color-grey;
      }
    }

    .li_bott {
      padding-top: 10rpx;
      display: flex;
      align-items: center;

      color: $uni-text-color-grey;
    }
  }
}
.wdzbox {
  margin: 200rpx 0 100rpx;
  flex-direction: column;
  .address_1_img {
    width: 300rpx;

    margin-bottom: 20rpx;
  }
  .wdz_text {
    color: $uni-text-color-grey;
  }
}
.del_img {
  display: block;
  margin-left: auto;
  width: 35rpx;
  margin-right: 5rpx;
}
</style>
